import Meta from "../../components/Meta";
import Header from "../../components/Header/Header";
import Nav from "../../components/Nav/Nav";
import Footer from "../../components/Footer/Footer";
import CateMenu from "../../components/Category/Menu";
import GoodsList from "../../components/Category/List";
import { request } from "../../utils/request";
import { transData } from "../../utils/tool";
import { Row, Col, Spin } from 'antd';
import { useState, useEffect, useContext } from 'react';
import { AppContext } from "../../store"
import { UPDATE_PARAMS, UPDATE_CATENAME } from "../../store/actionType";
import SortBar from "../../components/Category/SortBar";
export default function Category(props) {
  const [goods, setGoods] = useState(props.goodsData);
  const [loading, setLoading] = useState(false)
  const { dispatch } = useContext(AppContext);
  const getData = async (data) => {
    setLoading(true)
    const ret = await request(`${props.apiUrl}/api/client/sortGoods`, data)
    setGoods(ret.data.rows)
    setLoading(false)
  }
  useEffect(() => {
    setGoods(props.goodsData)
    console.log('pid', props.pid);
    console.log('props.navData.', props.navData)
    if (props.pid.split('_')[0] != 0) {
      const cateName = props.navData.find(item => item.id == props.pid.split('_')[0]).cateEnName;
      console.log('cateName', cateName)
      dispatch({
        type: UPDATE_CATENAME,
        data: cateName
      })
    }

    dispatch({
      type: UPDATE_PARAMS,
      data: { productMainCate: props.productMainCate }
    })

  }, [props.pid])
  return (
    <Spin spinning={loading}>
      <Meta>
        <title>NINAMOKA-Colletions</title>
      </Meta>
      <Header navData={props.navData} current={props.pid} />


      <Nav navData={props.navData} pagesData={props.pagesData} current={props.pid} />
      <div className="catgory-content">
        <Row>
          <Col xs={1} md={2}></Col>
          <Col xs={22} md={20}>
            <Row>
              <Col xs={0} md={6}>
                <CateMenu
                  data={props.cateData}
                  current={props.activeCateiIndex}
                  color={props.colorData}
                  size={props.sizeData}
                  getData={getData}
                  cate={props.productSubCate}
                  apiUrl={props.apiUrl}
                  sortType={props.sortType}
                />
              </Col>
              <Col xs={24} md={18}>
                <SortBar
                  data={props.cateData}
                  current={props.activeCateiIndex}
                  color={props.colorData}
                  size={props.sizeData}
                  getData={getData}
                  cate={props.productSubCate}
                  apiUrl={props.apiUrl}

                />
                <GoodsList data={goods} />
              </Col>
            </Row>
          </Col>
          <Col xs={1} md={2}></Col>
        </Row>

      </div>
      <Footer navData={props.navData} siteData={props.siteInfo}/>
    </Spin>
  );
}
export async function getServerSideProps(context) {
  let sortType = null;
  const apiUrl = process.env.APIURL;
  console.log('apiurl', apiUrl)
  const mainCateId = context.params.pid.split('_')[0];
  const subCateId = context.params.pid.split('_')[1];
  sortType = context.params.pid.split('_')[2];
  console.log('sortType==',sortType)
  

  const navData = await request(`${apiUrl}/api/client/nav`);

  const newNavData = transData(navData.data, "id", "pid");
  const subCate = await request(`${apiUrl}/api/client/category`, { cate: mainCateId })
  const activeCateiIndex = subCate.data.findIndex(item => subCateId == item.id)
  const propertyData = await request(`${apiUrl}/api/client/queryProps`);
  const productMainCate = mainCateId == 0 ? 0 : navData.data.find(item => item.id == mainCateId && item.pid == 0).code;
  let productSubCate = subCateId == 0 ? 0 : navData.data.find(item => item.id == subCateId && item.pid != 0).code;
  const siteInfo = await request(`${apiUrl}/api/client/querySiteInfo`);
  if(sortType){
    sortType = sortType.split(':')[1]
    console.log('sortType',sortType)
    
    productSubCate = null
  } else {
    productSubCate = productSubCate ? [productSubCate] : null;
  }
  const goodsData = await request(`${apiUrl}/api/client/sortGoods`, {
    productMainCate,
    productSubCate: productSubCate,
    pageSize: 60,
    current: 1,
    sortType:sortType ? [sortType] : null
  })
 
  return {
    props: {
      navData: newNavData,
      cateData: subCate.data,
      activeCateiIndex,
      colorData: propertyData.data.color,
      sizeData: propertyData.data.size,
      goodsData: goodsData.data.rows,
      pid: context.params.pid,
      productSubCate,
      productMainCate,
      apiUrl,
      siteInfo:siteInfo.data,
      sortType:sortType || null
    }
  };
}
